import React from 'react'
import { useState, useRef } from 'react';
import Son from './Son'
type Props = {}
interface userType {
    username: string,
    age: number
}
export default function Father(props: Props) {
    // 定义状态
    const [count, setCount] = useState<number>(0)
    const [user, setUser] = useState<userType>({ username: '张国栋', age: 20 })

    const ref1 = useRef<HTMLInputElement | null>(null)
    return (
        <div>
            {/* <p onClick={() => {
                setCount(100)
            }}>count:{count}</p> */}
            {/* 受控组件 */}
            {/* <p>
                <input type='text' value={user.username} onChange={(e) => {
                    setUser({
                        ...user,
                        username: e.target.value
                    })
                }} />
            </p> */}
            {/* 非受控组件 */}
            <p>
                <input ref={ref1} type='text' defaultValue={user.username} />
                <button onClick={() => {
                    // ref1.current!.value
                    // ref1.current?.value
                    //(ref1.current as HTMLInputElement).value
                }}>提交表单</button>
            </p>

            {/* 使用子组件 */}
            <Son user={user}></Son>
        </div>
    )
}